<!-- 搜索详情 -->
<template>
	<view class="container">
		<view class="header">
			<uni-nav-bar left-icon="back" @clickLeft="backClick" @clickRight="clickRight" background="inherit" color="#fff" status-bar="true" title="景区列表">
				<view class="navRight" slot="right">使用规则</view>
			</uni-nav-bar>
			<view class="uni-searchbox">
				<view class="uni-search-input">
					<view class="areaAddress" @tap="chooseCity">
						<text class="area clamp">{{areaAddress}}</text>
						<text class="yticon icon-xia"></text>
					</view>
					<icon type="search" :size='13' color='#999'></icon>
					<input confirm-type="search" placeholder="请输入搜索" placeholder-class="uni-input-plholder" class="uni-input" v-model="key"
					 @confirm="submitInput" />
				</view>
			</view>
		</view>
		<!-- <view class="conditions"> -->
		<!--筛选 条件 -->
		<!-- <HMfilterDropdown :filterData="filterData" :menuTop="menuTop" :defaultSelected="defaultSelected" @confirm="confirm"></HMfilterDropdown>
		</view> -->
		<!-- 筛选结果 -->
		<view class="search__results">
			<landmark-block :landmarkList="searchResult"></landmark-block>
		</view>
		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		<select-city ref="selectCity" :areaAddress="areaAddress" :cityData="cityData" @selected="selected"></select-city>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import landmarkBlock from "@/components/landmarkBlock/landmarkBlock";
	import selectCity from "@/components/selectCity/selectCity";
	import {
		travelProvinceCity,
		travelScenicList
	} from "@/api/user.js"
	export default {
		components: {
			HMfilterDropdown,
			uniLoadMore,
			landmarkBlock,
			selectCity
		},
		data() {
			return {
				areaAddress: '', //地区
				nodata: false,
				cityData: [],
				//#ifdef H5
				menuTop: 97,
				//#endif
				//#ifdef APP-PLUS
				menuTop: 0,
				//#endif
				searchResult: [],
				//--------暂时获取商户数据参数
				key: '', //搜索关键字
				city_id: "",
				city_pid: "",
				data: {
					longitude: uni.getStorageSync("locatLongitude"),
					latitude: uni.getStorageSync("locatLatitude")
				},
				//--------翻页参数
				page: 1,
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				filterData: [{
					"name": '综合排序',
					"type": 'hierarchy',
					"submenu": [{
						"name": "综合排序",
						"value": ""
					}, {
						"name": "离我最近",
						"value": ""
					}]
				}], //传入数据
				defaultSelected: []
			}
		},
		onLoad(options) {
			//#ifdef APP-PLUS
			try {
				const res = uni.getSystemInfoSync();
				this.menuTop = res.statusBarHeight + 95
			} catch (e) {
				// error
			}
			//#endif
			this.areaAddress = uni.getStorageSync("Areaaddress")
			if (options.key) {
				this.key = options.key
			} else if (options.id) {
				this.cate_id = options.id
			}
			this.$nextTick(function() {
				this.defaultSelected = [
					[0]
				]
			})
			travelProvinceCity().then(res => {
				this.cityData = res.data
				let j
				let _this = this
				this.cityData.forEach((items, index) => {
					for (j in items.city) {
						items.city[j].forEach((ite, i) => {
							if (ite.cityname == _this.areaAddress) {
								_this.city_id = ite.id
							}
						})
					}
				})
				this.landmarkList()
			})

		},
		onReachBottom() {
			if (this.loadStatus == 'noMore') return;
			this.loadStatus = "loading";
			this.landmarkList();
		},
		methods: {
			backClick() {
				uni.navigateBack()
			},
			clickRight() {
				uni.navigateTo({
					url:'/pages/center/help/rulesDetail?id=29&tit=旅游卡使用规则'
				})
			},
			chooseCity() {
				this.$refs.selectCity.show()
			},
			selected(e) {
				console.log(e)
				this.areaAddress = e.areaAddress
				this.city_id = e.id
				this.city_pid = e.pid
				this.loadStatus = "loading"
				this.page = 1;
				this.searchResult = [];
				this.landmarkList();
			},
			submitInput() {
				this.page = 1;
				this.searchResult = [];
				this.loadStatus = "loading"
				this.landmarkList();
			},
			landmarkList() {
				travelScenicList({
					searchtxt: this.key,
					pid: this.city_pid,
					cityid: this.city_id,
					lng: this.data.longitude,
					lat: this.data.latitude,
					page: this.page
				}).then(res => {
					this.loadStatus = "more";
					let list = res.data.list.map((val, key) => {
						let str = val.content
						var reg4 = /(<\/?font.*?>)|(<\/?span.*?>)|(<\/?div.*?>)|(<\/?p.*?>)|(<\/?br.*?>)|(<\/?a.*?>)/gi;
						val.content = str.replace(reg4, '')
						return val
					});
					this.searchResult.push.apply(this.searchResult, list);
					if (list.length < 20) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.searchResult.length == 0) {
						this.contentText.contentnomore = '无相关景点'
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/index/detail?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.header {
			background: linear-gradient(90deg, #46AEF7 0%, #1DD5E6 100%);
			//#ifdef H5
			height: calc(44px + 106rpx);
			//#endif
			//#ifdef APP-PLUS
			height: calc(44px + 106rpx + var(--status-bar-height));
			//#endif
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 999;
			.navRight{
				font-size: 24rpx;
			}
		}

		.uni-searchbox {
			width: 100%;
			padding: 10px 30rpx;
			// padding: 30rpx 0;
			box-sizing: border-box;
			position: relative;
			z-index: 999;

			.uni-search-input {
				height: 33px;
				border-radius: 35rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #FFF;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;

				.areaAddress {
					font-weight: bold;
					top: 14px;
					border-right: 2rpx solid #e8e8e8;
					line-height: 25px;
					padding-right: 20rpx;
					max-width: 150rpx;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;

					.yticon {
						margin-left: 4rpx;
						font-size: 24rpx;
					}
				}

				.uni-input {
					flex: 1;
					color: #333;
					padding: 0 16rpx;
					font-size: 28rpx;
				}

				.uni-input-plholder {
					font-size: 28rpx;
					color: #b2b2b2;
				}
			}
		}

		.search__results {
			//#ifdef H5
			padding-top: calc(44px + 106rpx);
			//#endif
			//#ifdef APP-PLUS
			padding-top: calc(44px + 106rpx + var(--status-bar-height));
			//#endif
		}
	}
</style>
